<template>
    <div class="tombMain">
        <div class="title">凤凰山网上祭祀</div>
        <van-form
            show-error
            scroll-to-error
            class="myform"
            @submit="onSubmit"
            @failed="onFailed" 
        >
            <van-field 
                v-model="formData.szName" 
                required
                center
                name="szName" 
                label="墓主姓名"
                placeholder="墓主姓名" 
                :rules="[{ required: true, message: '请填写墓主姓名' }]"
            />
            <van-field 
                v-model="formData.gmId" 
                required
                center
                name="gmId" 
                label="墓位编号"
                placeholder="墓位编号" 
                :rules="[{ required: true, message: '请填写墓位编号,例:3-10' }, { pattern: /^[A-Za-z0-9]+[-][0-9]+$/, message: '请填写正确的墓位编号' }]"
            />
            <van-field 
                v-model="formData.password" 
                required
                center
                name="password" 
                label="口令"
                placeholder="口令" 
                :rules="[{ required: true, message: '请填写口令' }]"
                class="password"
            />
            <van-button 
                type="primary" 
                block 
                native-type="submit" 
                style="width:80%;margin:10vw auto 0"
            >
                提交
            </van-button>
        </van-form>
        <router-link to="/cloudSacrificeBuildLibrary">
            <div class="text">去建馆</div>
        </router-link>
        <div class="tips">
            <div>1.如果未建馆，请先点击去建馆按钮创建纪念馆</div>
            <div>2.如果已建馆，请输入信息，进入纪念馆</div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive } from 'vue'
    import { useRouter } from 'vue-router'
    import { cloudMemorialServiceLoginApi } from '@/apis'
    import { showToast, showSuccessToast, showFailToast, showLoadingToast, closeToast, showDialog  } from 'vant'
    const router = useRouter()
    const formData = reactive({
        szName: '', //墓主姓名
        gmId: '', //墓位编号
        password: '', //口令
        type: 'N',
    })
    const onSubmit = (val) => {
        if(formData.password.trim().length === 0){
            formData.type = 'S'
        }
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        })
        cloudMemorialServiceLoginApi({
            szName: formData.szName,
            gmId: formData.gmId,
            password: formData.password,
            type: formData.type,
            th_company: '凤凰山微信公众号',
        }).then(res=>{
            closeToast()
            console.log(res)
            if (res.code == 200 && res.data){
                showSuccessToast('正在进入纪念馆');
                router.push('/cloudSacrificePersonalHall?th_id=' + res.data)
            }else{
                // showFailToast('未找到该纪念馆!')
                showDialog({
                    title: '提示',
                    message: '未找到该纪念馆!'
                })
            }
        }).catch(err=>{
            closeToast()
        })
    }
    const onFailed = (value) => {
        showDialog({
            title: '提示',
            message: value.errors[0].message
        })
    }
</script>

<style lang="scss" scoped>
    .myform {
        padding:100px 20px 0 20px;
    }
    .tombMain{
        background: url('@/assets/bg/bg7.png');
        background-size: 100% 100%;
        width: 100vw;
        height: 100vh;
    }
    .title{
        text-align: center;
        font-size: 20pt;
        padding: 5vw;
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .fontOld{
        font-size: 18pt;
    }

    .text {
        width: 100px;
        float: right;
        text-align: right;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 18px;
    }
    .tips {
        text-align: left;
        padding-top: 70px;
        padding-left: 10px;
        color: #9c163c;
        font-size: 14px;
    }
    :deep(.password .van-field__control) {
        -webkit-text-security:disc;
        text-security:disc;
    }
</style>
